<template>
  <div class="app-container">
    <el-row>
      <el-button v-if="defaultPage !== 'monitor'" type="text" size="large" icon="el-icon-s-operation"
        @click="monitorVisible = true">
        {{ $t('ControlPanel') }}
      </el-button>
      <el-button v-if="defaultPage !== 'control'" type="text" size="large" icon="el-icon-s-operation"
        @click="controllVisible = true">
        {{ $t('CentralizedControl') }}
      </el-button>
      <el-button v-if="defaultPage !== 'dashboard'" type="text" size="large" icon="el-icon-s-operation"
        @click="dashboardVisible = true">
        {{ $t('Dashboard') }}
      </el-button>
    </el-row>
    <el-dialog :visible.sync="monitorVisible" fullscreen>
      <DeviceMonitor />
    </el-dialog>
    <el-dialog :visible.sync="controllVisible" fullscreen>
      <CentralizedControl />
    </el-dialog>
    <el-dialog :visible.sync="dashboardVisible" fullscreen>
      <DashBoard />
    </el-dialog>
    <DeviceMonitor v-if="defaultPage === 'monitor'" />
    <CentralizedControl v-if="defaultPage === 'control'" />
    <DashBoard v-if="defaultPage === 'dashboard'" />
  </div>
</template>

<script>
  import DeviceMonitor from '@/views/device/DeviceMonitor.vue'
  import DashBoard from '@/views/DashBoard.vue'
  import CentralizedControl from '@/views/device/CentralizedControl.vue'
  export default {
    components: {
      DeviceMonitor,
      DashBoard,
      CentralizedControl
    },
    data() {
      return {
        defaultPage: 'dashboard',
        monitorVisible: false,
        dashboardVisible: false,
        controllVisible: false,
      }
    },
    methods: {}
  }

</script>
<style>

</style>
